<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="script/jquery-1.10.min.js">
// <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="script/bootstrap-3.3.7.min.js"></script>

<script>
$(document).ready(function(){
   //样例  对象数组
   var obj_array= {0:"例子1",1:"例子2"}

    //样例数据
    var json_data_ex= {"data": [{"name": 0},{"name":1}], "success": true}

    function table_append(dom,data){

            $(dom + "  tbody").empty();  //注意tbody要有空格，字符串拼接不能接着，清空表格

            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,
 			//index是序号
            $(dom + " tbody").append("<tr><td>"+index+"</td>\
            	   <td>"+obj.name+"</td>\
                   <td>"+obj_array[obj.name]+"</td>\
                   </tr>"
                   )

            $(dom + "  tr:not(:first)").css("color","red"); //选择器,除第一行以外 红色
            });




    }

	$("#reload_table").click(function(){  //点击事件

            // alert("请求数据异常,使用样例数据")
            table_append(("#t"),json_data_ex.data)



	});
});
</script>
</head>
<body>

        <table id="t" class="table">
        <thead>
        <th>序号</th>
        <th>任务名称</th>
  
        </thead>

         <tbody>
         </tbody>

        </table>


</body>

<button id="reload_table"> 刷新表格</button>

</html>
